<template>
  <div class="content-wrapper">
    <div class="main-title">天翼云TeleDB数据库生态总视图</div>
    <div class="tag-list">
      <span>极致安全</span>
      <span>开箱即用</span>
      <span>弹性扩展</span>
      <span>自动运维</span>
      <span>服务保障</span>
      <span>兼容生态</span>
    </div>
    <div class="inner-box">
      <img class="img" src="@/assets/images/img6.png" />
      <text-link class="text"></text-link>
      <div
        class="dome"
        :class="`dome` + (index + 1)"
        @click="goDetail(item)"
        v-for="(item, index) in list"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import TextLink from './components/text-link'
export default {
  name: 'index',
  components: {
    TextLink
  },
  data () {
    return {
      list: [
        { name: 'OLTP数据库', pathName: 'DetailNav1' },
        { name: 'OLAP数据库', pathName: 'DetailNav1' },
        { name: 'NEWSQL数据库', pathName: 'DetailNav7' },
        { name: 'NoSql数据库', pathName: 'DetailNav5' },
        { name: '数据库生态工具', pathName: 'DetailNav1' },
        { name: '数据库管理工具', pathName: 'DetailNav1' },
        { name: '数据库管理工具', pathName: 'DetailNav1' }
      ]
    }
  },
  methods: {
    goDetail (val) {
      this.$router.push({ name: val.pathName })
    }
  }
}
</script>

<style scoped lang="scss">
.img {
  width: 100%;
}
.inner-box {
  width: 1605px;
  margin: 40px auto 20px;
  position: relative;
}
.text {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
}
.run {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1;
}
.tag-list {
  display: flex;
  justify-content: center;
  span {
    padding-left: 25px;
    position: relative;
    color: $--color-primary;
    font-weight: 600;
    font-size: 24px;
    margin-right: 25px;
    &:before {
      width: 6px;
      height: 6px;
      background: $--color-white;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 15px;
      content: '';
    }
    &:first-child {
      &:before {
        width: 0;
        height: 0;
      }
    }
  }
}
.dome {
  position: absolute;
  width: 120px;
  height: 120px;
  cursor: pointer;
  color: transparent;
  z-index: 3;
}
.dome1 {
  top: 220px;
  left: 565px;
  background: url('~@/assets/images/prod/a.png') no-repeat;
  background-size: 100%;
  &:hover {
    background: url('~@/assets/images/prod/a2.png') no-repeat;
    background-size: 100%;
  }
}
.dome2 {
  top: 280px;
  left: 730px;
  background: url('~@/assets/images/prod/b.png') no-repeat;
  background-size: 100%;
  &:hover {
    background: url('~@/assets/images/prod/b2.png') no-repeat;
    background-size: 100%;
  }
}
.dome3 {
  top: 330px;
  left: 885px;
  background: url('~@/assets/images/prod/c.png') no-repeat;
  background-size: 100%;
  &:hover {
    background: url('~@/assets/images/prod/c2.png') no-repeat;
    background-size: 100%;
  }
}
.dome4 {
  top: 390px;
  left: 1050px;
  background: url('~@/assets/images/prod/d.png') no-repeat;
  background-size: 100%;
  &:hover {
    background: url('~@/assets/images/prod/d2.png') no-repeat;
    background-size: 100%;
  }
}
.dome5 {
  top: 450px;
  left: 1215px;
  background: url('~@/assets/images/prod/e.png') no-repeat;
  background-size: 100%;
  z-index: 10;
  &:hover {
    background: url('~@/assets/images/prod/e2.png') no-repeat;
    background-size: 100%;
  }
}
.dome6 {
  top: 385px;
  left: 360px;
  background: url('~@/assets/images/prod/f.png') no-repeat;
  background-size: 100%;
  &:hover {
    background: url('~@/assets/images/prod/f2.png') no-repeat;
    background-size: 100%;
  }
}
.dome7 {
  top: 505px;
  left: 695px;
  background: url('~@/assets/images/prod/g.png') no-repeat;
  background-size: 100%;
  &:hover {
    background: url('~@/assets/images/prod/g2.png') no-repeat;
    background-size: 100%;
  }
}
</style>
